<template>
	<view class="content">
		
		<view class="title"><input type="text" style="font-size: 40rpx;font-weight: bold;" v-model="commitData.title" placeholder="请输入标题~"/></view>
		<view class="title-data"><textarea v-model="commitData.content" placeholder="请叙述送养宠物的缘由，告知事项…" /></view>
		<view class="content-upload">
			<view class="uploads">
				<view class="upload-none" @click="upload">
					<u-icon name="camera" color="#606266" size="38"></u-icon>
					<span style="color: #606266;margin-top: 25rpx;">添加封面</span>
				</view>
				<view class="upload-none2" v-if="commitData.cover.length != 0">
					<span class="upload-del" @click="commitData.cover = []">
						<u-icon name="close" color="#FFFFFF" size="24"></u-icon>
					</span>
					<image :src="commitData.cover[0]" mode=""></image>
				</view>
			</view>
			<u-upload style="margin-left: -10rpx;margin-top: 13rpx;" ref="uUpload" :action="action"
			 :multiple="false" :show-tips="false" :file-list="commitDataCover"
			  @on-uploaded="uploaded" @on-remove="onRemove"
			   :auto-upload="false" max-count="5" @on-list-change="choose"
				:formData="formData" :header="header"></u-upload>
		</view>
		<view class="location">
			<view>
				<u-icon name="map" color="#999999" size="36"></u-icon>
				<span style="margin-left: 20rpx;">{{address}}</span>
			</view>
		</view>
		<view class="border"></view>
		<view class="table-name" @click="show = true">
			<span>选择宠物</span>
			<span>
				<u-icon name="arrow-right" style="margin-left: 20rpx;margin-top: 5rpx;" color="#999999" size="30"></u-icon>
				{{petValue}}
				<u-select v-model="show" :list="DataList" @confirm="confirm"></u-select>
			</span>
		</view>
		<view class="table-selector">
			<span>状态</span>
			<span :class="commitData.health == 1 ? 'sexActivate' : ''" @click="commitData.health = 1">健康</span>
			<span :class="commitData.health == 2 ? 'sexActivate' : ''" @click="commitData.health = 2">患病</span>
			<span :class="commitData.health == 3 ? 'sexActivate' : ''" @click="commitData.health = 3">残疾</span>
		</view>
		<view class="table-selector">
			<span>疫苗</span>
			<span :class="commitData.vaccine == 1 ? 'sexActivate' : ''" @click="commitData.vaccine = 1">未免疫</span>
			<span :class="commitData.vaccine == 2 ? 'sexActivate' : ''" @click="commitData.vaccine = 2">免疫中</span>
			<span :class="commitData.vaccine == 3 ? 'sexActivate' : ''" @click="commitData.vaccine = 3">已免疫</span>
		</view>
		<view class="table-selector">
			<span>驱虫</span>
			<span :class="commitData.insect == 1 ? 'sexActivate' : ''" @click="commitData.insect = 1">未驱虫</span>
			<span :class="commitData.insect == 2 ? 'sexActivate' : ''" @click="commitData.insect = 2">已驱虫</span>
		</view>
		<view class="table-selector">
			<span>绝育</span>
			<span :class="commitData.neuter == 1 ? 'sexActivate' : ''" @click="commitData.neuter = 1">未绝育</span>
			<span :class="commitData.neuter == 2 ? 'sexActivate' : ''" @click="commitData.neuter = 2">已绝育</span>
		</view>
		<view class="table-selector">
			<span>体型</span>
			<span :class="commitData.body == 1 ? 'sexActivate' : ''" @click="commitData.body = 1">小型</span>
			<span :class="commitData.body == 2 ? 'sexActivate' : ''" @click="commitData.body = 2">中型</span>
			<span :class="commitData.body == 3 ? 'sexActivate' : ''" @click="commitData.body = 3">大型</span>
		</view>
		<view class="table-selector">
			<span>毛量</span>
			<span :class="commitData.gross == 1 ? 'sexActivate' : ''" @click="commitData.gross = 1">无毛</span>
			<span :class="commitData.gross == 2 ? 'sexActivate' : ''" @click="commitData.gross = 2">短毛</span>
			<span :class="commitData.gross == 3 ? 'sexActivate' : ''" @click="commitData.gross = 3">长毛</span>
		</view>
		<view class="border" style="margin-top: 40rpx;"></view>
		<view class="table-selector">
			<span>领养费</span>
			<span :class="commitData.adoptType == 1 ? 'sexActivate' : ''" @click="commitData.adoptType = 1">保证金</span>
			<span :class="commitData.adoptType == 2 ? 'sexActivate' : ''" @click="commitData.adoptType = 2">付费</span>
			<span :class="commitData.adoptType == 3 ? 'sexActivate' : ''" @click="commitData.adoptType = 3">免费</span>
		</view>
		<view class="table-selector" v-if="commitData.adoptType == 1">
			<span>担保期</span>
			<span :class="commitData.assure == 1 ? 'sexActivate' : ''" @click="commitData.assure = 1">360天</span>
			<span :class="commitData.assure == 2 ? 'sexActivate' : ''" @click="commitData.assure = 2">180天</span>
			<span :class="commitData.assure == 3 ? 'sexActivate' : ''" @click="commitData.assure = 3">90天</span>
		</view>
		<view class="adoptInput" v-if="commitData.adoptType == 1 || commitData.adoptType == 2">
			<input type="text" v-model="commitData.price" placeholder="设定收费金额（元）"/>
		</view>
		<view class="tips" v-if="commitData.adoptType == 1">
			<span>* 你向领养人设置领养保证金，金额自定。</span>
			<span>* 领养交易期间:领养费用由铲屎官平台官方保管。</span>
			<span>* 担保期间:若发生违反领养协议的情况，由送养人/领养人 双方协商解决，保证金按协商结果处理。</span>
			<span>* 担保到期:若符合领养协议，保证金将全额返还给领养人。</span>
		</view>
		<view class="tips" v-if="commitData.adoptType == 2">
			<span>* 你向领养人收取宠物领养费，金额自定。</span>
			<span>* 领养交易期间:领养费用由铲屎官平台官方保管。</span>
			<span>* 领养过程所产生的任何问题均与铲屎官平台无关，由领养双方自行协商解决。</span>
			<span>* 领养成功:领养费30天冻结观察期，领养人无异议全额汇 款至送养人;若发生违反领养协议的情况，由送养人/领养 人双方协商解决，领养费按协商结果处理。</span>
			<span>* 领养失败:领养费全额返还给领养人。</span>
		</view>
		<view class="tips" v-if="commitData.adoptType == 3">
			<span>* 你无偿向领养人送养宠物，不收取任何费</span>
			<span>* 铲屎官平台仅提供领养双方信息展示与交流服务，不参与线下 交割。</span>
			<span>* 领养过程所产生的任何问题均与铲屎官平台无关，由领养双方 自行协商解决。</span>
		</view>
		<view class="select" @click="transportShow = true">
			<view>运送方式</view>
			<view>
				<u-icon name="arrow-right" color="#333333" size="28" style="margin-left: 20rpx;"></u-icon>
				{{transportValue}}
				<u-select v-model="transportShow" :list="transportList" @confirm="transport"></u-select>
			</view>
		</view>
		<view class="border"></view>
		<view class="table-name">
			<span>领养要求</span>
		</view>
		<view class="checkbox">
			<u-checkbox-group @change="checkboxGroupChange"	wrap="true">
				<u-checkbox 
					shape="circle"
					@change="checkboxChange" 
					v-model="item.checked" 
					v-for="(item, index) in list" :key="index" 
					:name="item.name"
					:disabled="item.disabled"
				>{{item.name}}</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="checkbox2">
			<u-checkbox-group>
				<u-checkbox 
					shape="circle"
					v-model="item.checked" 
					v-for="(item, index) in list2" :key="index" 
					:name="item.name"
					:disabled="item.disabled"
				>{{item.name}}</u-checkbox>
			</u-checkbox-group>
			<view class="deal">
				》<span @click="goDeal">领养协议</span>查看《
			</view>
		</view>
		<view class="border" style="margin-bottom: 200rpx;"></view>
		<view class="button">
			<u-button type="primary" class="styleCss"  hover-class="none" shape="circle" @click="setData">修改</u-button>
		</view>
		<image-cropper :src="tempFilePath" @confirm="confirmCover" @cancel="cancel"></image-cropper>
	</view>
</template>

<script>
	import ImageCropper from "./invinbg-image-cropper.vue";
export default {
	components: {ImageCropper},
	data() {
		return {
			transportShow: false,
			transportValue: '',
			transportList: [
				{
					label: '同城（送养人送宠上门',
					value: '1'
				},
				{
					label: '同城（领养人上门领宠）',
					value: '2'
				}
			],
			address: undefined,
			DataList: [],
			show: false,
			petValue: '请选择宠物',
			petId: 0,
			header: {
				token: uni.getStorageSync('token')
			},
			formData:{},
			action: this.commonApi.petAvatar,
			tempFilePath: undefined,
			commitData: {
				title: undefined,
				cover: [],
				contentImg: undefined,
				longitude: undefined,
				latitude: undefined,
				content: undefined,
				health: 1,
				vaccine: 1,
				insect: 1,
				neuter: 1,
				body: 1,
				pid: 0,
				gross: 1,
				adoptType: 3,
				assure: 1,
				price: 0,
				transportType: 1,
				adoptRequire: '1,8'
			},
			list2: [
				{
					name: '签订领养协议',
					checked: true,
					disabled: true,
					adoptRequire: 8
				}
			],
			list: [
				{
					name: '仅限同城',
					checked: true,
					disabled: true,
					adoptRequire: 1
				},
				{
					name: '仅限自有住房',
					checked: false,
					disabled: false,
					adoptRequire: 2
				},
				{
					name: '安装纱窗/阳台封闭',
					checked: false,
					disabled: false,
					adoptRequire: 3
				},
				{
					name: '按时疫苗/定期驱虫',
					checked: false,
					disabled: false,
					adoptRequire: 4
				},
				{
					name: '适龄绝育',
					checked: false,
					disabled: false,
					adoptRequire: 5
					
				},
				{
					name: '允许回访探望',
					checked: false,
					disabled: false,
					adoptRequire: 6
				},
				{
					name: '领养后日记打卡',
					checked: false,
					disabled: false,
					adoptRequire: 7
				}
			],
			options: {},
			commitDataCover: []
		};
	},
	methods: {
		upload() {
			let self = this
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (res) => {
					self.tempFilePath = res.tempFiles[0].path
				}
			});
		},
		confirmCover(e) {
			let self = this
			uni.uploadFile({
				url: self.commonApi.petAvatar,
				fileType: 'img',
				name: 'file',
				formData: {
					file: '1',
					fileName: e.detail.tempFilePath
				},
				filePath: e.detail.tempFilePath,
				header:{
					"token": uni.getStorageSync('token')
				},
				success(res) {
					let data = JSON.parse(res.data)
					self.commitData.cover.push(data.data)
				}
			})
			self.tempFilePath = ''
		},
		cancel() {
			console.log('canceled')
		},
		goDeal(){
			uni.navigateTo({
				url: 'deal?pid=' + this.commitData.pid + '&require=' + this.commitData.adoptRequire
			})
		},
		checkboxChange(e) {
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			let data = []
			this.list.forEach(item=>{
				if(item.checked){
					data.push(item.adoptRequire)
				}
			})
			if(data.length == 0){
				data = [1,8]
			}else{
				data.push(8)
			}
			this.commitData.adoptRequire = data.toString()
		},
		choose(e,name){
			for(let i=0;i<e.length;i++){
				this.formData = {
					file: e[i].url,
					fileName: e[i].url
				}
				this.$nextTick(function(){
					this.$refs.uUpload.upload()
				})
			}
		},
		uploaded(lists){
			console.log(lists);
			let data = []
			if(this.options.id){
				this.commitDataCover = lists
			}else{
				lists.forEach(item=>{
					data.push(item.response.data)
				})
				this.commitData.cover = data.toString()

			}
		},
		onRemove(index, lists){
			console.log('图片已被移除')
		},
		setData(){
			let self = this
			if(!self.commitData.title){
				uni.showToast({
					title:'请先填写标题',
					duration:500,
					icon:'none'
				})
				return false
			}
			if(!self.commitData.content){
				uni.showToast({
					title:'请填写送养缘由',
					duration:500,
					icon:'none'
				})
				return false
			}
			if(self.commitData.cover.length == 0){
				uni.showToast({
					title:'请上传封面',
					duration:500,
					icon:'none'
				})
				return false
			}
			if(!self.commitData.contentImg){
				uni.showToast({
					title:'请上传图片',
					duration:500,
					icon:'none'
				})
				return false
			}
			if(!self.list2[0].checked){
				uni.showToast({
					title:'请先勾选领养协议',
					duration:500,
					icon:'none'
				})
				return false
			}
			uni.getLocation({
			    type: 'wgs84',
				geocode: true,
			    success: function (res) {
					self.commitData.longitude = res.longitude
					self.commitData.latitude = res.latitude
					self.commitData.id = self.options.id
					self.commitData.contentImg = []
					self.commitDataCover.forEach(item=>{
						item = item.url
						self.commitData.contentImg.push(item)
					})
					self.commitData.cover = self.commitData.cover.toString()
					self.commitData.contentImg = self.commitData.contentImg.toString()
					self.$request(self.commonApi.petAdoptUpdate,'POST',self.commitData,'application/json').then(res=>{
						uni.showToast({
							title:'修改成功',
							duration:500,
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 2
							})
						},500)
					})
			    }
			});
		},
		transport(e){
			this.transportValue = e[0].label
			this.commitData.transportType = e[0].value
		},
		confirm(e){
			this.petValue = e[0].label
			this.commitData.pid = e[0].value
		},
		getPet(){
			let uid = uni.getStorageSync('uid')
			this.$request(this.commonApi.petList+uid, 'GET', {}).then(res => {
				this.petValue = res.data.data[0].name
				this.commitData.pid = res.data.data[0].pid 
				this.transportValue = this.transportList[0].label
				res.data.data.forEach(item=>{
					item = {
						label: item.name,
						value: item.pid
					}
					this.DataList.push(item)
				})
			});
		},
		getDetails(){
			let self = this;
			self.$request(self.commonApi.petAdopt+self.options.id,'GET').then(res=>{
				self.commitData = res.data.data
				self.commitData.cover = res.data.data.cover.split(',')
				let images = res.data.data.contentImg.split(',')
				images.forEach(item=>{
					item = {
						url: item
					}
					self.commitDataCover.push(item)
				})
				let RequireList = res.data.data.adoptRequire
				self.list.forEach(item=>{
					if(RequireList.indexOf(item.adoptRequire) != '-1'){
						item.checked = true
					}
				})
			})
		}
	},
	mounted() {
		this.getPet()
	},
	onLoad(option){
		let self = this
		uni.getLocation({
			type: 'wgs84',
			geocode: true,
			success: function (res) {
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo?key=f797b843ae3f8b8d65b9ea2b393d0f0d&location=' + res.longitude + ',' + res.latitude,
					method: 'GET',
					success: (res) => {
						console.log(res.data);
						self.address = res.data.regeocode.addressComponent.city
					}
				})
			}
		})
		this.options = option
		this.getDetails()
	}

};
</script>

<style lang="scss" scoped>
	.upload-del{
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 45rpx;
		height: 45rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FA3534;
		z-index: 10;
	}
	.upload-none2{
		image{
			position: absolute;
			top: 0;
			left: 0;
			width: 200rpx;
			height: 200rpx;
			// background: #f4f5f6;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}
	.upload-none{
		position: absolute;
		top: 0;
		left: 0;
		width: 200rpx;
		height: 200rpx;
		// background: #f4f5f6;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.uploads{ 
		width: 200rpx;
		height: 200rpx;
		background: #f4f5f6;
		border-radius: 15rpx;
		position: relative;
	}
	.deal{
		width: 50%;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		font-size: 28rpx;
		color: #333333;
		span{
			color: #0095FF;
		}
	}
	.checkbox2{
		width: 700rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-top: -10rpx;
		padding-bottom: 40rpx;
	}
	.styleCss{
		width: 660rpx;
	}
	.button /deep/ .u-btn--primary{
		background: #FFCC00;
	}
	.button{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		background: white;
		padding: 60rpx 0;
		z-index: 1;
	}
	.checkbox /deep/ .u-checkbox{
		line-height: 2 !important;
	}
	.checkbox{
		width: 700rpx;
		padding: 40rpx 0;
	}
	.select{
		width: 700rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		color: #333333;
		padding: 20rpx 0;
		view:nth-of-type(1){
			width: 30%;
			display: flex;
			align-items: center;
			flex-direction: row;
			font-size: 32rpx;
		}
		view:nth-of-type(2){
			width: 70%;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			font-size: 28rpx;
		}
	}
	.adoptInput{
		width: 700rpx;
		height: 70rpx;
		margin-top: 30rpx;
		background: #F9F9F9;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		input{
			width: 100%;
			padding: 0 20rpx;
			font-size: 24rpx;
			color: #333333;
		}
	}
	.tips{
		width: 700rpx;
		display: flex;
		justify-content: center;
		color: #333333;
		font-size: 26rpx;
		align-items: center;
		flex-direction: column;
		background: #f6f6f6;
		padding: 30rpx 0;
		margin-top: 40rpx;
		line-height: 50rpx;
		span{
			width: 660rpx;
		}
	}
.sexActivate {
	margin-left: 25rpx !important;
	padding: 10rpx 25rpx !important;
	border-radius: 10rpx !important;
	background: rgba(255, 154, 0, 0.08) !important;
	color: #ff9a00 !important;
	font-size: 26rpx !important;
}
.table-selector {
	width: 700rpx;
	padding-top: 40rpx;
	display: flex;
	align-items: center;
	flex-direction: row;
	font-size: 28rpx;
	color: #333333;
	span:not(:first-child) {
		margin-left: 25rpx;
		padding: 10rpx 25rpx;
		border-radius: 10rpx;
		background: #f6f6f6;
		color: #999999;
		font-size: 26rpx;
	}
}
.table-name {
	width: 700rpx;
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	font-size: 32rpx;
	color: #333333;
	border-bottom: 1px solid #f2f2f2;
	span:nth-of-type(2){
		height: 120rpx;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
	}
}
.border {
	width: 100%;
	height: 10rpx;
	background: #f6f6f6;
}
.location {
	width: 700rpx;
	display: flex;
	align-items: center;
	flex-direction: row;
	font-size: 26rpx;
	color: #333333;
	padding: 20rpx 0;
	view{
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 26rpx;
		color: #333333;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		background: #f9f9f9;
	}
}
.title-data {
	width: 100%;
	textarea {
		width: 670rpx;
		height: 160rpx;
		padding: 25rpx;
	}
}
.title {
	width: 700rpx;
	padding: 20rpx 0;
	border-bottom: 1px solid #f6f6f6;
	font-size: 32rpx;
	font-weight: bold;
	color: #999999;
}
.content-upload {
	width: 700rpx;
	padding: 40rpx 0;
	display: flex;
	flex-direction: column;
}
.content {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}
</style>
